<template>
	<view>
		<view style="height: 18upx;"></view>
		<view v-if="entity.userEvaluateId" class="card-view">
			<view class="circle-echarts">
				<CircleEcharts :option="entity"></CircleEcharts>
				<image src="/static/circle-logo.png" class="circle-logo"></image>
			</view>
			<view class="title-text">{{entity.lnvestorType}}</view>
			<view class="score-view">
				<view>您的测评结果</view>
				<view class="score-text">{{entity.score}}</view>
				<view>分</view>
			</view>
			<view class="tag-view">{{entity.riskDescription}}</view>

			<navigator open-type="redirect" :url="`/pagesMine/riskAssessment/riskAssessment?authFlag=${entity.type}`"
				hover-class="none" class="button-view">
				重新评估
			</navigator>
		</view>
		<block v-if="projectList.length">
			<view class="title-view">推荐项目</view>
			<view class="card-project" v-for="(item, index) in projectList" :key="index">
				<CardProjectItem :item="item"></CardProjectItem>
			</view>
			<view style="height: 160upx;"></view>
		</block>
	</view>
</template>

<script>
	import CircleEcharts from './components/CircleEcharts.vue'
	export default {
		components: {
			CircleEcharts
		},
		data() {
			return {
				projectList: [],
				entity: {
					userEvaluateId: '',
					type: "",
					score: 0,
					lnvestorType: "",
					riskDescription: "",
					totalScore: 0
				}
			}
		},
		onLoad(options) {
			this.getEvaluationResult()
			this.getRandomProjectList()
		},
		methods: {
			async getEvaluationResult() {
				uni.$util.showLoading()
				const res = await uni.$api.evaluationResult().finally(uni.finally)
				this.entity = res.data
			},
			async getRandomProjectList() {
				uni.$util.showLoading()
				const res = await uni.$api.getRandomProjectList().finally(uni.finally)
				this.projectList = res.data
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 14rpx;
		padding-top: 83upx;
		padding-bottom: 47upx;
		@extend .column;

		.circle-echarts {
			width: 300upx;
			height: 300upx;
			@extend .column;
			position: relative;

			.circle-logo {
				width: 112upx;
				height: 112upx;
				position: absolute;
			}
		}

		.title-text {
			font-weight: 600;
			font-size: 40rpx;
			color: #522B00;
			margin-top: 60upx;
		}

		.score-view {
			@extend .row;
			font-weight: 400;
			font-size: 29rpx;
			color: #2C1101;
			margin-top: 18upx;

			.score-text {
				color: #FF0000;
				font-size: 36rpx;
				margin: 0 12upx;
			}
		}

		.tag-view {
			padding: 7upx 25upx;
			background: #FFF4F3;
			border-radius: 25rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF3C2D;
			text-align: center;
			margin-top: 18upx;
		}

		.button-view {
			width: 580rpx;
			height: 91rpx;
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
			border-radius: 45rpx;
			@extend .column;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			margin-top: 50upx;
		}
	}

	.title-view {
		width: 100%;
		padding: 0 50upx;
		font-weight: 600;
		font-size: 29rpx;
		color: #2C1101;
		position: relative;
		margin-top: 33upx;
		margin-bottom: 25upx;
		&:before {
			content: "";
			width: 56rpx;
			height: 14rpx;
			background: rgba(255,38,21,0.1);
			position: absolute;
			left: 50upx;
			bottom: 0;
		}
	}
</style>